import {Spin} from 'antd';
import {init} from 'pptx-preview';
import {FC, useEffect, useRef, useState} from 'react';
// import DocumentView from 'react-native-document';
import css from './PPTPreview.module.css';

const PPTPreview: FC = ({filePath = '/office/test.pptx'}) => {
  if (!filePath) {
    return <div className={'text-center text-3xl'}>暂无数据</div>
  }
  const [isLoading, setIsLoading] = useState(true);
  const pptContainerRef = useRef(null);

  useEffect(() => {
    if (!pptContainerRef.current) return;
    // 调用库的init方法生成一个预览器
    const pptxPreviewer = init(pptContainerRef.current!, {
      width: 955,
      height: 622,
    });
    setIsLoading(false);
    // 获取文件或者读取文件，获取文件的 ArrayBuffer格式数据，传给组件进行预览
    fetch(filePath)
      .then((response) => response.arrayBuffer())
      .then((res) => {
        // 调用预览器的preview方法
        pptxPreviewer.preview(res);
        setIsLoading(false);
      })
      .finally(() => {
        setIsLoading(false)
      })

  }, []);

  return (
    <Spin spinning={isLoading}>
      <div ref={pptContainerRef} className={css.ppt_container}></div>
    </Spin>
  )
}

export default PPTPreview;
